<!DOCTYPE html>
<html>
<head>
    <title>井位坐标地图</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 引入Leaflet地图库 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100vh;
        }
        .coordinates-info {
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 1000;
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div class="coordinates-info">
        <h3>井位坐标</h3>
        <div id="coordinates-list"></div>
    </div>
    <script>
        // 井位坐标数据
        const wellCoordinates = [
            { id: "1#井", lng: 110.55784464, lat: 19.25457424 },
            { id: "2#井", lng: 110.55396080, lat: 19.25651893 },
            { id: "3#井", lng: 110.55233002, lat: 19.26659149 },
            { id: "4#井", lng: 110.56181967, lat: 19.27501267 },
            { id: "5#井", lng: 110.55906773, lat: 19.28175740 },
            { id: "6#井", lng: 110.56211472, lat: 19.27942817 },
            { id: "7#井", lng: 110.55962563, lat: 19.27418728 },
            { id: "8#井", lng: 110.56298375, lat: 19.26619144 }
        ];

        // 初始化地图，以第一个点为中心
        const map = L.map('map').setView([wellCoordinates[0].lat, wellCoordinates[0].lng], 13);

        // 添加OpenStreetMap底图
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // 自定义井图标
        const wellIcon = L.icon({
            iconUrl: 'https://cdn-icons-png.flaticon.com/512/3212/3212567.png',
            iconSize: [32, 32],
            iconAnchor: [16, 32],
            popupAnchor: [0, -32]
        });

        // 添加所有井位标记
        wellCoordinates.forEach(well => {
            const marker = L.marker([well.lat, well.lng], { 
                icon: wellIcon,
                title: well.id
            }).addTo(map);
            
            // 添加弹出信息
            marker.bindPopup(`
                <b>${well.id}</b><br>
                经度: ${well.lng.toFixed(8)}°<br>
                纬度: ${well.lat.toFixed(8)}°
            `);
            
            // 点击标记时居中显示
            marker.on('click', function() {
                map.setView([well.lat, well.lng], 15);
            });
        });

        // 添加连接线
        const linePoints = wellCoordinates.map(well => [well.lat, well.lng]);
        L.polyline(linePoints, {
            color: 'blue',
            weight: 2,
            opacity: 0.7,
            dashArray: '5, 5'
        }).addTo(map);

        // 显示坐标列表
        const coordinatesList = document.getElementById('coordinates-list');
        wellCoordinates.forEach(well => {
            const div = document.createElement('div');
            div.innerHTML = `<strong>${well.id}:</strong> 经度 ${well.lng.toFixed(8)}°, 纬度 ${well.lat.toFixed(8)}°`;
            coordinatesList.appendChild(div);
        });

        // 自动调整地图范围以包含所有标记
        const group = new L.featureGroup(Array.from(map._layers).addTo(map));
        map.fitBounds(group.getBounds().pad(0.2));
    </script>
    
</body>
</html>